<div class="table-items-row table-items-row-expandable language">
    <div class="table-items-row-summary row gx-2 align-items-center">
        <div class="col-2" [class.language-master]="language.isMaster" [class.language-optional]="language.isOptional">
            <span class="truncate">{{ language.iso2Code }}</span>
        </div>

        <div class="col" [class.language-master]="language.isMaster" [class.language-optional]="language.isOptional">
            <span class="truncate">{{ language.englishName }}</span>
        </div>

        <div class="col-auto">
            <div class="float-end">
                @if (!language.isMaster) {
                    <button
                        class="btn btn-outline-secondary btn-expand me-1"
                        attr.aria-label="{{ 'common.options' | sqxTranslate }}"
                        [class.expanded]="isEditing"
                        (click)="toggleEditing()"
                        type="button">
                        <span class="hidden">{{ "common.settings" | sqxTranslate }}</span> <i class="icon-settings"></i>
                    </button>
                }
                <button
                    class="btn btn-text-danger"
                    attr.aria-label="{{ 'common.delete' | sqxTranslate }}"
                    confirmRememberKey="removeLanguage"
                    confirmText="i18n:languages.deleteConfirmText"
                    confirmTitle="i18n:languages.deleteConfirmTitle"
                    [disabled]="!language.canDelete"
                    (sqxConfirmClick)="remove()"
                    type="button">
                    <i class="icon-bin2"></i>
                </button>
            </div>
        </div>
    </div>

    @if (isEditing) {
        <div class="table-items-row-details">
            <form [formGroup]="editForm.form" (ngSubmit)="save()">
                <div class="table-items-row-details-tabs clearfix">
                    <div class="float-end">
                        <button class="btn btn-text-secondary" (click)="toggleEditing()" type="button">
                            {{ "common.cancel" | sqxTranslate }}
                        </button>
                        @if (isEditable) {
                            <button class="btn btn-primary ms-1" type="submit">{{ "common.save" | sqxTranslate }}</button>
                        }
                    </div>
                </div>

                <div class="table-items-row-details-tab">
                    @if (isEditable || fallbackLanguages.length > 0) {
                        <div class="form-group row">
                            <label class="col-3 col-form-label fallback-label" for="{{ language.iso2Code }}_fallback">{{
                                "common.fallback" | sqxTranslate
                            }}</label>
                            <div class="col-9">
                                @if (fallbackLanguages.length > 0) {
                                    <div
                                        class="fallback-languages"
                                        cdkDropList
                                        [cdkDropListData]="$any(fallbackLanguages)"
                                        [cdkDropListDisabled]="!isEditable"
                                        (cdkDropListDropped)="sort($event)">
                                        @for (language of fallbackLanguages; track language) {
                                            <div class="fallback-language table-drag" cdkDrag cdkDragLockAxis="y">
                                                <div class="row g-0">
                                                    @if (isEditable) {
                                                        <div class="col-auto">
                                                            <i class="icon-drag2 drag-handle me-1" cdkDragHandle></i>
                                                        </div>
                                                    }

                                                    <div class="col">{{ language.englishName }}</div>

                                                    @if (isEditable) {
                                                        <div class="col-auto">
                                                            <button
                                                                class="btn btn-text-secondary btn-sm"
                                                                (click)="removeFallbackLanguage(language)"
                                                                type="button">
                                                                <i class="icon-close"></i>
                                                            </button>
                                                        </div>
                                                    }
                                                </div>
                                            </div>
                                        }
                                    </div>
                                }

                                @if (otherLanguage && isEditable) {
                                    <form class="form fallback-form" (ngSubmit)="addFallbackLanguage()">
                                        <div class="row gx-2">
                                            <div class="col">
                                                <select
                                                    class="form-select fallback-select"
                                                    id="{{ language.iso2Code }}_fallback"
                                                    name="otherLanguage"
                                                    [(ngModel)]="otherLanguage">
                                                    @for (otherLanguage of fallbackLanguagesNew; track language.iso2Code) {
                                                        <option [ngValue]="otherLanguage">
                                                            {{ otherLanguage.englishName || otherLanguage.iso2Code }}
                                                        </option>
                                                    }
                                                </select>
                                            </div>

                                            <div class="col-auto">
                                                <button class="btn btn-success" type="submit">
                                                    {{ "languages.add" | sqxTranslate }}
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                }
                            </div>
                        </div>
                    }

                    @if (!language.isMaster) {
                        <div class="form-group row">
                            <div class="col offset-3 col-9">
                                <div class="form-check">
                                    <input class="form-check-input" id="{{ language.iso2Code }}_isMaster" formControlName="isMaster" type="checkbox" />
                                    <label class="form-check-label" for="{{ language.iso2Code }}_isMaster">
                                        {{ "languages.master" | sqxTranslate }}
                                    </label>
                                </div>
                                <sqx-form-hint> {{ "languages.masterHint" | sqxTranslate }} </sqx-form-hint>
                            </div>
                        </div>
                    }

                    @if (!language.isMaster) {
                        <div class="form-group row">
                            <div class="col offset-3 col-9">
                                <div class="form-check">
                                    <input class="form-check-input" id="{{ language.iso2Code }}_isOptional" formControlName="isOptional" type="checkbox" />
                                    <label class="form-check-label" for="{{ language.iso2Code }}_isOptional">
                                        {{ "languages.optional" | sqxTranslate }}
                                    </label>
                                </div>
                                <sqx-form-hint> {{ "languages.optionalHint" | sqxTranslate }} </sqx-form-hint>
                            </div>
                        </div>
                    }
                </div>
            </form>
        </div>
    }
</div>
